<!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2022-12-12 16:59:53
 * @LastEditors: xuzp4
 * @LastEditTime: 2022-12-12 17:27:20
 * @FilePath: \vue_demo\src\view\threejs\animation.vue
-->
<template>
  <canvas class="webgl"></canvas>
</template>

<script>
import * as THREE from "three";
import gsap from 'gsap';
export default {
  mounted() {
    const canvas = document.querySelector(".webgl");
    // Scene
    const scene = new THREE.Scene();

    const group = new THREE.Group();
    scene.add(group);

    const cube1 = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshBasicMaterial({ color: 0xff0000 })
    );
    group.add(cube1);

    const sizes = {
      width: 800,
      height: 600,
    };
    // Camera
    const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
    camera.position.z = 3;
    scene.add(camera);

    // Renderer
    const renderer = new THREE.WebGLRenderer({
      canvas,
    });
    renderer.setSize(sizes.width, sizes.height);
    renderer.render(scene, camera);

    // animatino
    console.log(group.position)
    gsap.to(group.position,{duration:1,delay:1,x:2})
    gsap.to(group.position,{duration:1,delay:2,x:0})
    // const clock = new THREE.Clock();
    const tick = () => {
    //   const elapsedTime = clock.getElapsedTime();
    //   // update objects
    //   group.position.y = Math.sin(elapsedTime);
    //   group.position.x = Math.cos(elapsedTime);
      // render
      renderer.render(scene, camera);
      window.requestAnimationFrame(tick);
    };
    tick();
  },
};
</script>

<style>

</style>